<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '500px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')

      this.chart.setOption({
        title: {
          text: ''
        },
        tooltip: {},
        legend: {
          data: ['个人能力值', '平均能力值'],
          itemGap: 50
        },
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: '#fff',
              backgroundColor: '#999',
              borderRadius: 3,
              padding: [3, 5]
            }
          },
          indicator: [
            { name: '计算机原理', max: 100 },
            { name: '数据结构', max: 100 },
            { name: '算法', max: 100 },
            { name: '前端', max: 100 },
            { name: '后端', max: 100 },
            { name: '逻辑思维', max: 100 }
          ]
        },
        series: [
          {
            name: '个人 VS 平均',
            type: 'radar',
            // areaStyle: {normal: {}},
            data: [
              {
                value: [90, 70, 80, 70, 73, 85],
                name: '个人能力值'
              },
              {
                value: [70, 65, 65, 50, 60, 60],
                name: '平均能力值'
              }
            ]
          }
        ]
      })
    }
  }
}
</script>
